<template>
	<view class="homeDatails">
		<view class="tops">
			<view class="left">
				<view class="img" @click="back()"><image src="@/static/images/home_ico_more@2x.png" mode="widthFix"></image></view>
				<view class="man">
					<!-- <image src="@/static/img/release.png" mode="widthFix"></image> -->
				<text @click="userData(shopdata.userId)">{{shopdata.name}}</text>
				</view>
			</view>
			<view class="right">
				<text @click="follow" v-html="guanzhu"></text>
				<image src="@/static/images/biji_ico_share@2x.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="ban">
			<!-- <image src="@/static/images/1682066803582.jpg" mode="widthFix"></iamge> -->
			<u-swiper
			 :list="shopdata.images | fg"
			@change="e => currentNum = e.current"
			:autoplay="true"
			class="Simg"
			indicator
			indicatorStyle="right: 20px">
			</u-swiper>
			<!-- <image :src="shopdata.images | fg" mode="widthFix"></iamge> -->
			<view class="wuImg">
				<u-avatar-group :urls="urls" size="35" gap="0.4" ></u-avatar-group>
				<text>…等{{urls.length}}人觉得很赞</text>
			</view>
		</view>
		<view class="homeDatails_cont">
			<text class="font35">{{ shopdata.title }}</text>
			<view class="film" @click="shopDetails(shopdata.shopId)">
				<view class="images filmLt">
					<image :src="shopdata.shop.images | fg1" mode="widthFix"></image>
				</view>
				<view class="filmRt">
					<view class="filmTop">
						<view class="wenz">
							<text class="font30">{{shopdata.shop.name}}</text>
							<text class="font19">近30天{{shopdata.shop.comments}}人打卡</text>
						</view>
						<text class="font23">1.3km</text>
					</view>
					<view class="filmBom">
						<view class="filmBom_l" @click.stop="userhome(shopdata.id)">
							<u-rate :value="3.7" active-color="#FA3534" inactive-color="#b2b2b2" gutter="2" readonly></u-rate>
							<text>¥{{shopdata.shop.avgPrice}}/人</text>
						</view>
						<image src="@/static/images/biji_ico_more@2x.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="tet">
				<text v-html="shopdata.content"></text>
			</view>
			
		</view>
		<view class="bomBu">
			<view class="bomBu_cont">
				<input
				    placeholder="请输入内容~"
				    v-model="value"
				    @change="change"
					class="inp"
				  ></input>
					<view class="save-incons" @click.stop="changeSa()">
						<image src="@/static/images/tool_ico_pinglun@2x.png" mode="widthFix"></image>
						<text>50</text>
					</view>
					<view class="save-incons" @click.stop="changeSa()">
						<uni-icons color="#000" :type="false ? 'heart-filled':'heart'" size="30"></uni-icons>
						<text>100</text>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentNum:0,
				isFollow:'',//判断是否关注
				bodyId:'',
				guanzhu:'关注',
				shopdata:{},
				urls: [],
				userId:0
			}
		},
		onLoad() {
			let pages = getCurrentPages();
			let len = pages.length;
			let curParam = pages[len - 1].options;
			console.log(`${curParam.userId}`)
			this.shopId = curParam.id;
			this.userId = curParam.userId
			console.log(`shopId值：${this.shopId}`)
			// 详情
			this.shopData();
			//判断是否 关注
			this.followOfNot();
			// 查询某个blog的前五个点赞用户
			this.bloglikes(this.shopId)
			
			console.log(`this.userId的值，${this.userId}`)
		},
		filters:{
			fg(data){//图片过滤
				let imgs = data.split(',');
				return imgs
			},
			fg1(data){//图片过滤
				let imgs = data.split(',');
				return imgs[0]
			}
		},
		methods: {
			// 笔记数据
			shopData(){
				uni.request({
					url:"/blog/"+this.shopId,
					method:'get',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						let data = obj;
						console.log("商户数据：",data)
						this.shopdata = data.data.data
					}
				})
			},
			shopDetails(id){//接收 参数 id
				// 跳转到详情页  --  根据参数加载对应的数据
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/home/ShopDetails/ShopDetails?id='+id
				})
			},
			followOfNot(){
				console.log('this.userId的值，'+this.userId)
				uni.request({
					url:'/ow/or/not/'+this.userId,
					method:'get',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						console.log('关注',obj.data.data)
						if(obj.data.data){
							this.guanzhu = "已关注"
							this.isFollow = true
						}else{
							this.guanzhu = '未关注'
							this.isFollow = false
						}
					}
				})
			},
			follow(){//不确定 字段 isFollow
				console.log(this.isFollow)
				uni.request({
					url:'/follow/'+this.userId+'/'+this.isFollow,
					method:'PUT',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						let data = obj;
						console.log(data.data.success)
						if(data.data.success){
								this.guanzhu = "已关注"
								this.isFollow = true
						}else{
								this.guanzhu = '未关注'
								this.isFollow = false
						
						}
					}
				})
			},
			userhome(id){
				uni.navigateTo({
					url:'/pages/userHome/userHome?id='+id
				})
			},
			back(){
				uni.navigateBack()
			},
			bloglikes(id){
				uni.request({
					url:'//likes/'+id,
					method:'get',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(val)=>{
						console.log("查询某个blog的前五个点赞用户",val)
						let arr = [];
						for (var i = 0; i < val.data.data.length; i++) {
							arr.push(val.data.data[i].icon)
						}
						this.urls = arr
					}
				})
			},
			blogOfFollow(){
				uni.request({
					url:'/blog/of/follow',
					method:'get',
					data:{
						'lastId':'',
						'offset':''
					},
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':'37E8BF7C067ADECF4DE3DDCFCC7CCB40'
					} ,
					success:(val)=>{
						console.log("/blog/of/follow我关注的好友的笔记",val)
					}
				})	
			},
			userData(userId){
				uni.navigateTo({
					url: '/pages/userHome/userHome?id='+userId
				})
			}
		}
}
</script>

<style lang="scss">
.ban{
	position: relative;
	image{
		width: 100%;
	}
	.wuImg{
		display: flex;
		align-items: center;
		position: absolute;
		width: 100%;
		left: 28rpx;
		bottom: 17rpx;
		text{
			color: #FFFFFF;
			font-size: 23rpx;
			display: inline-block;
			margin-left: 8rpx;
		}
	}
}
.homeDatails{
	padding-bottom: 220rpx;
	.tops{
		display: flex;
		padding: 12rpx 54rpx;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
			.img{
				image{
					width: 60rpx;
					height: 60rpx;
					transform: rotate(90deg);
				}
			}
			.man{
				display: flex;
				align-items: center;
				image{
					width: 66rpx;
					border-radius: 50%;
					margin-right: 18rpx;
				}
				text{
					color: #222222;
					font-size: 27rpx;
				}
			}
		}
		.right{
			display: flex;
			align-items: center;
			image{
				width: 46rpx;
			}
			text{
				width: 127rpx;
				height: 58rpx;
				text-align: center;
				line-height: 58rpx;
				background: #16843F;
				border-radius: 33rpx;
				font-size: 31rpx;
				color: #fff;
				margin-right: 30rpx;
			}
		}
	}
	.ban{
		image{
			width: 100%;
		}
	}
	.homeDatails_cont{
		padding: 30rpx;
		.font35{
			color: #333333;
			font-size: 35rpx;
			line-height: 1.5;
			margin-bottom: 14rpx;
		}
	}
	.film{
		background: #F3F9F6;
		border-radius: 15rpx;
		padding: 18rpx;
		display: flex;
		margin-top: 18rpx;
		.filmLt{
			image{
				width: 96rpx;
			}
		}
		.filmRt{
			width: calc(100% - 96rpx);
			padding-left: 16rpx;
			.filmBom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 14rpx;
				text{
					color: #222222;
					font-size: 23rpx;
				}
				image{
					width: 16rpx;
				}
				.filmBom_l{
					display: flex;
					align-items: center;
				}
			}
			.filmTop{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.font30{
					color: #252525;
					font-size: 30rpx;
					margin-right: 20rpx;
				}
				.font19{
					color: #E66740;
					font-size: 19rpx;
					background-color: #FFF0E6;
					padding: 5rpx 20rpx;
				}
				.font23{
					font-size: 23rpx;
					color: #666;
				}
			}
		}
	}
	.tet{
		padding: 20rpx 0;
		color: #333333;
		font-size: 31rpx;
		line-height: 1.5;
	}
	.bomBu{
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		background: rgba(255,255,255,0.94);
		box-shadow: 0rpx -1rpx 19rpx -6rpx rgba(0,0,0,0.17);
		border-radius: 19rpx 19rpx 0rpx 0rpx;
		backdrop-filter: blur(50px);
		.bomBu_cont{
			padding: 22rpx 100rpx 80rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.inp{
			width: 215rpx;
			height: 77rpx;
			background: #F3F3F3;
			border-radius: 38rpx;
			padding: 0 12rpx;
			text-align: center;
			color: #999999;
			font-size: 27rpx;
		}
		.save-incons{
			display: flex;
			align-items: center;
			text{
				margin-left: 6rpx;
			}
			image{
				width: 48rpx;
			}
		}
	}


}
</style>
